<template>
	<view class="uni_box home">
		<navbar title='预览商品'>
		</navbar>
		<view class="content">
			<u-swiper v-if="swiperlist" :list="swiperlist" height="700" border-radius="0"></u-swiper>
			<view class="yuview">
				<text class="name">{{info.name}}</text>
				<text class="miao">{{info.synopsis}}</text>
				<text class="price">$<text class="num">{{info.price}}</text></text>

				<view class="guiview">
					<view class="guiitem">
						<text class="lname">送货方式</text>
						<text class="songhuo ml">{{info.freight_from_name}} ${{info.freight}}邮费</text>
						<image src="/static/detailicon.png" class="detailicon"/>
					</view>
					<view class="guiitem">
						<text class="lname">规格</text>
						<text class="songhuo ml">{{ info.specs_name }}</text>
						<image src="/static/detailicon.png" class="detailicon"/>
					</view>
					<text class="tit">商品详情</text>
					<image
					    style="width: 100%;"
						:src="item"
						v-for="(item,index) in info.imgs" :key="index"
						mode="widthFix"
					/>
					<!-- <u-parse :html="content" :tag-style="style"></u-parse> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist: [
				],
				content: "",
				style: {
					img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				id:'',
				info:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
				this.gethuixian();//回显
			}
		},
		onShow() {
		},
		methods: {
			async gethuixian(){
				let res = await this.$u.api.productinfo({
					id:this.id
				});
				this.info = res.info
				let r = res.info
				let a ={image:r.img}
				this.swiperlist = []
				this.swiperlist.push(a)
				// this.form.synopsis = r.synopsis
				// this.form.specs = r.specs
				// this.form.number = r.number
				// this.form.price = r.price
				// this.form.freight_from = r.freight_from
				// this.form.freight = r.freight
				// this.form.img = r.img
				// this.form.imgs = r.imgs
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		.yuview{
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			.name{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.miao{
				display: block;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
			.price{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F64D24;
				.num{
					font-size: 40rpx;
					position: relative;
					top: 3rpx;
					margin-left: 3rpx;
				}
			}
			.guiview{
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				border-top: 1rpx solid #eee;
				.guiitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #eee;
					.lname{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					.songhuo{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
					.ml{
						margin-left: auto;
					}
					.detailicon{
						width: 20rpx;
						margin-left: 15rpx;
						height: 20rpx;
					}
				}
				.tit{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					display: block;
					margin: 30rpx 0;
				}
			}
		}
	}
</style>
